<template>
    <div class="app-container">
      <div class="main-content">
        <div style="display:flex; align-items: flex-start; grid-gap: 10px;">
  
        <div style="width: 320px"></div>
  
  <!-- 上侧博客栏 -->
        <div style="flex: 1;" class="card">
  
          <div class="blog-box">
  
            <div style="flex: 1; width: 100%;">
              <div style="font-size: 30px; font-weight: bold; margin-bottom: 10px;">{{ this.tableData.title }}</div>
              <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 22px">{{ this.tableData.content }}</div>
              <div style="display: flex">
                <div style="flex: 1; font-size: 13px;">
                  <span style="color: #666; margin-right: 20px;"><i class="el-icon-user"></i>{{ this.tableData.userName }}</span>
                  <span style="color: #666; margin-right: 20px;"><i class="el-icon-eye"></i>{{ this.tableData.readCount }}</span>
                </div>
              </div>
            </div>

  
          </div>
  
  
        </div>
  
  <!--  -->
        <div style="width: 320px;">
        </div>
        </div>
      
      </div>
      <div class="main-content">
        <div style="display:flex; align-items: flex-start; grid-gap: 10px;">
  
        <div style="width: 320px"></div>
  
  <!-- 下侧评论区 -->
        <div style="display: block;" class="card">
  
          <div class="blog-box" style="flex-direction: column;" >
  
            <div style="font-size: 20px; color: #666; margin-bottom: 15px;">评论区</div><br>
            <!-- v-for循环渲染评论区 -->
            <div style="flex: 1; width: 100%;" v-for="item in this.pinglun" :key="item.replyId">
              <div style="display: flex; flex-direction: row; margin-bottom: 10px;">
                <div style="flex: 1; font-size: 13px;">
                  <span style="color: #666; margin-right: 20px;"><i class="el-icon-user"></i>{{ item.commentTime }}</span>
                </div>
              </div>
              <div class="line1" style="color: #666; margin-bottom: 10px; font-size: 20px">{{ item.comment }}</div><br>
            </div>

  
          </div>
  
          <!-- 评论框 -->
          <div class="plk">
            <input type="text" v-model="send" style="width: 100%; height: 40px;margin-bottom: 10px; font-size: 20px;"><br/>
            <button @click="submitForm" style="width: 10%; height: 40px; font-size: 22px;">发表评论</button>
          </div>
          
          
  
          
  
        </div>
  
  <!-- 右侧分类栏 -->
        <div style="width: 320px;">
        </div>
        </div>
      
      </div>
    </div>
  </template>
  
  
  <script>
  import { listConsultation, getConsultation, delConsultation, addConsultation, updateConsultation } from "@/api/consultation/consultation";
  import { listConsultationreply, getConsultationreply, delConsultationreply, addConsultationreply, updateConsultationreply } from "@/api/consultationreply/consultationreply";

  export default {
    name: "conten",
    data() {
      return {
        // 版本号
        version: "3.8.4",
        categoryList:[{name:'全部博客'},{name:'前端'},{name:'后端'}],
        current:'全部博客',
        tableData:null,//所有的数据
        pageNum: 1,//当前的页码
        pageSize: 10,//每页显示的个数
        send: '',
        pinglun: [],
        total: 0,
        currentTime: new Date()//当前时间
      };
    },
    computed: {
      id() {
        return this.$route.params.id;
      }
    },
    mounted(){
      console.log(this.id)
      this.load(this.id)
      this.loadBlogs(this.id)
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      load(id){
        //请求评论区的数据
        listConsultationreply({
        pageNum: 1,
        pageSize: 10,
        comment: null,
        commentTime: null,
        consultationId: id
      }).then(response => {
        console.log(response.rows)
        this.pinglun = response.rows;
      });
      },
      selectCategory(categoryName){
        this.current = categoryName
        this.loadBlogs(1)
      },
      //请求博客内容数据
      loadBlogs(id){
        getConsultation(id).then(response => {
          console.log(response.data)
          this.tableData = response.data;
          console.log('kt')
        });
      },
      handleCurrentChange(pageNum) {
        this.load(pageNum)
      },
      submitForm() {
        addConsultationreply({
          comment: this.send,
          commentTime: this.formatTime(),
          consultationId: this.id
        });
      },
      formatTime() {
        const date = new Date(); // 创建一个新的 Date 对象
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    },
  };
  </script>
  
  <style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
  
    ul {
      list-style-type: none;
    }
  
    h4 {
      margin-top: 0px;
    }
  
    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }
  
    p {
      margin-top: 10px;
  
      b {
        font-weight: 700;
      }
    }
  
    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  
  //主体部分
  .main-content{
    margin-top: 20px;
  }
  
  .card {
    width: 60%;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.1);
  }
  
  .category-item {
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    font: #0a0a0a;
    cursor: pointer;
  }
  
  .category-item-active {
    background-color: #1890ff;
    color: #fff;
    border-radius: 5px;
  }
  
//   .line1 {
//     white-space: nowrap;
//     overflow: hidden;
//     text-overflow:ellipsis;
//   }
  
  .blog-box {
    display: flex; 
    width: 100%;
    flex-direction: row;
    grid-gap: 15px; 
    padding: 10px 0; 
    border-bottom: 1px solid #DDD; 
  }
  
  .blog-box:first-child {
    padding-top: 0;
  }
  </style>